<template>
  <layout title="imageUploa图片上传">
    <layout-content title="基础使用">
      <tn-image-upload :file-list="fileList" :limit="1" :action="action" :form-data="formData"></tn-image-upload>
    </layout-content>

    <layout-content title="手动上传">
      <tn-image-upload ref="imageUploadRef" :action="action" :form-data="formData" :auto-upload="false"></tn-image-upload>
      <view class="tn-margin-top-sm tn-flex-center">
        <tn-button @click="uploadImage">上传文件</tn-button>
      </view>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnImageUpload from '@/tuniao-ui/components/tn-image-upload/src/ImageUpload.vue'
import TnButton from '@/tuniao-ui/components/tn-button/src/Button.vue'
import { ImageUploadUserFile } from '@/tuniao-ui/types'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 上传相关参数
let action: string ='https://www.hualigs.cn/api/upload'
let formData:Record<string, any> = {
  apiType: 'this,ali',
  token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
  image: null
}
let fileList = ref<Array<ImageUploadUserFile>>([
  { url: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg' }
])

const imageUploadRef = ref<InstanceType<typeof TnImageUpload>>()
const uploadImage = () => {
  imageUploadRef.value?.upload()
}
</script>

<style lang="scss" scoped>
</style>
